<template>
  <div class="flight-item">
    <div>
      <!-- 显示的机票信息 -->
      <el-row type="flex" align="middle" class="flight-info">
        <el-col :span="6">
          <span>{{ data.airline_name }} </span> {{ data.flight_no }}
        </el-col>
        <el-col :span="12">
          <el-row
            type="flex"
            justify="space-between"
            class="flight-info-center"
          >
            <el-col :span="8" class="flight-airport">
              <strong>{{ data.dep_time }}</strong>
              <span>{{ data.org_airport_name }}</span>
            </el-col>
            <el-col :span="8" class="flight-time">
              <span>{{ countTime }}</span>
            </el-col>
            <el-col :span="8" class="flight-airport">
              <strong>{{ data.arr_time }}</strong>
              <span>{{ data.dst_airport_name }}</span>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6" class="flight-info-right">
          ￥<span class="sell-price">{{ bestPrice }}</span
          >起
        </el-col>
      </el-row>
    </div>
    <el-collapse-transition>
      <div class="flight-recommend" v-if="isShow">
        <!-- 隐藏的座位信息列表 -->
        <el-row type="flex" justify="space-between" align="middle">
          <el-col :span="4">低价推荐</el-col>
          <el-col :span="20">
            <el-row
              type="flex"
              justify="space-between"
              align="middle"
              class="flight-sell"
              v-for="(v, i) in data.seat_infos"
              :key="i"
            >
              <el-col :span="16" class="flight-sell-left">
                <span>{{ v.group_name }}</span> | 上海一诺千金航空服务有限公司
              </el-col>
              <el-col :span="5" class="price">
                ￥{{ v.org_settle_price }}
              </el-col>
              <el-col :span="3" class="choose-button">
                <el-button
                  type="warning"
                  size="mini"
                  @click="
                    $router.push({
                      path: '/air/order',
                      query: { id: data.id, seat_xid: v.seat_xid },
                    })
                  "
                >
                  选定
                </el-button>
                <p v-if="v.nums != 'A'">剩余：{{ v.nums }}</p>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: ["data", "isShow"],
  // 计算属性
  computed: {
    bestPrice() {
      // 遍历当前航班的所有座位的数据，对比过后，拿出数据最便宜的那张返回回来
      // 先预设第一个是座位是最低价的
      let bestPrice = this.data.seat_infos[0].settle_price_child;
      // 遍历所有的座位，每个座位的信息都是拿出来对比，如果有更底的就替换原来的数据
      this.data.seat_infos.forEach((seat) => {
        if (seat.settle_price_child < bestPrice) {
          bestPrice = seat.settle_price_child;
        }
      });
      return bestPrice;
    },

    // 计算时隔时间
    countTime() {
      // 出发时间
      const depTime = this.data.dep_time.split(":");
      // 到达时间
      const arrTime = this.data.arr_time.split(":");
      // 算出分钟
      const arr = Number(arrTime[0]) * 60 + Number(arrTime[1]);
      const dep = Number(depTime[0]) * 60 + Number(depTime[1]);
      let dis = arr - dep;
      // 判断 如果小于0 就是第二天的时间了 所以需要使用 到达时间在加上一天的时间减去出发时间
      if (dis < 0) {
        dis = arr + 24 * 60 - dep;
      }

      return Math.floor(dis / 60) + "时" + (dis % 60) + "分";
    },
  },
};
</script>

<style scoped lang="less">
.flight-item {
  border: 1px #ddd solid;
  margin-bottom: 10px;

  .flight-info {
    padding: 15px;
    cursor: pointer;

    > div {
      &:first-child,
      &:last-child {
        text-align: center;
      }
    }
  }

  .flight-info-center {
    padding: 0 30px;
    text-align: center;

    .flight-airport {
      strong {
        display: block;
        font-size: 24px;
        font-weight: normal;
      }
      span {
        font-size: 12px;
        color: #999;
      }
    }

    .flight-time {
      span {
        display: inline-block;
        padding: 10px 0;
        border-bottom: 1px #eee solid;
        color: #999;
      }
    }
  }

  .flight-info-right {
    .sell-price {
      font-size: 24px;
      color: orange;
      margin: 0 2px;
    }
  }
}

.flight-recommend {
  background: #f6f6f6;
  border-top: 1px #eee solid;
  padding: 0 20px;

  .flight-sell {
    border-bottom: 1px #eee solid;
    padding: 10px 0;

    &:last-child {
      border-bottom: none;
    }

    .flight-sell-left {
      font-size: 12px;
      span {
        color: green;
      }
    }

    .price {
      font-size: 20px;
      color: orange;
    }

    .choose-button {
      text-align: center;
      color: #666;
      button {
        display: block;
        width: 100%;
        margin-bottom: 5px;
      }
    }
  }
}
</style>